<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>打印</title>
		<style>
			@page {
				margin: 0;
				padding: 0;
			}
			html,
			body {
				width: 100%;
				height: 100%;
				font-family: Arial, sans-serif;
				font-size: 14px;
			}

			html,
			body,
			ul {
				margin: 0;
				padding: 0;
			}

			.print-paper {
				font-family: Arial, sans-serif;
				margin: 0 auto;
				box-sizing: border-box;
				color: #000 !important;
			}

			.paper--3,
			.paper--4 {
				position: relative;
				overflow: visible;
			}

			.paper--3::before,
			.paper--4::before {
				position: absolute;
				content: '';
				top: 0;
				bottom: 0;
				overflow-x: hidden;
				width: 13mm;
				left: -13mm;
				z-index: 0;
				background: url('@/assets/print-circle-left.png') 100% 0 repeat-y;
			}

			.paper--3::before,
			.paper--4::after {
				position: absolute;
				content: '';
				top: 0;
				bottom: 0;
				overflow-x: hidden;
				width: 13mm;
				right: -13mm;
				background: url('@/assets/print-circle-right.png') 0 0 repeat-y;
			}

			.print-paper__inner {
				position: relative;
				z-index: 2;
				width: 100%;
				height: 100%;
			}

			.print-element {
				display: flex;
				word-break: break-all;
				user-select: none;
			}

			.inline-flex {
				display: inline-flex;
			}

			.inline-flex > label {
				flex: none;
				white-space: pre-wrap;
			}

			.inline-flex > span {
				word-break: break-word;
			}

			/* 打印组件 */
			.vdr-container {
				position: absolute;
				box-sizing: border-box;
			}

			/* 表格 */
			table {
				display: table;
				border-collapse: separate;
				box-sizing: border-box;
				text-indent: initial;
				border-spacing: 2px;
				border-color: gray;
				border-collapse: collapse;
			}

			table colgroup {
				display: table-column-group;
			}

			table td {
				padding: 2px;
				word-break: break-all;
				text-align: center;
				vertical-align: middle;
				line-height: 1;
				height: 20px;
				box-sizing: border-box;
			}

			tr.row-subtotal td:first-child {
				text-align: left;
			}

			table tr.row-total td:first-child {
				text-align: left;
			}
			.no-border {
				border: none !important;
			}

			.no-border table {
				border: none !important;
				border-collapse: separate !important;
			}

			.no-border td {
				border: none !important;
			}

			.no-border th {
				border: none !important;
			}
			/*.no-border {*/
			/*  border: none!important;*/
			/*  table {*/
			/*    border: none!important;*/
			/*    border-collapse: separate!important;*/
			/*  }*/
			/*  table {*/
			/*    border: none!important;*/
			/*    border-collapse: separate!important;*/
			/*  }*/
			/*  td {*/
			/*    border: none!important;*/
			/*    border-collapse: separate!important;*/
			/*  }*/
			/*  th {*/
			/*    border: none!important;*/
			/*    border-collapse: separate!important;*/
			/*  }*/
			/*}*/
			/*.table-container {*/
			/*  position: relative;*/
			/*  margin: 1px;*/
			/*  width: 100%;*/
			/*  height: calc(100% - 2px);*/
			/*  td {*/
			/*    border: 1px solid #000;*/
			/*    margin:0px -1.3px -1.3px 0px*/
			/*  }*/
			/*  &.verticalLine-flex-start {*/
			/*    .cell {*/
			/*      align-items: start!important;*/
			/*    }*/
			/*  }*/
			/*  &.verticalLine-center {*/
			/*    .cell {*/
			/*      align-items: center!important;*/
			/*    }*/
			/*  }*/
			/*  &.verticalLine-flex-end {*/
			/*    .cell {*/
			/*      align-items: end!important;*/
			/*    }*/
			/*  }*/
			/*  &.flex-start {*/
			/*    .cell {*/
			/*      justify-content: left!important;*/
			/*    }*/
			/*  }*/
			/*  &.center {*/
			/*    .cell {*/
			/*      justify-content: center!important;*/
			/*    }*/
			/*  }*/
			/*  &.flex-end {*/
			/*    .cell {*/
			/*      justify-content: right!important;*/
			/*    }*/
			/*  }*/
			/*  table {*/
			/*    border-collapse: collapse;*/
			/*    width: 100%;*/
			/*    height: 100%;*/
			/*  }*/

			/*  th, td {*/
			/*    border: 1px solid black;*/
			/*    padding: 2:px;*/
			/*  }*/

			/*  .cell {*/
			/*    font-size: 14px;*/
			/*    display: flex;*/
			/*    align-items: center;*/
			/*    justify-content: center;*/
			/*    cursor: pointer;*/
			/*    user-select: none;*/
			/*    height: 100%;*/
			/*    width: 100%;*/
			/*    color: #000;*/
			/*  }*/

			/*  .hidden-element {*/
			/*    position: absolute;*/
			/*    top: 0;*/
			/*    bottom: 0;*/
			/*    width: 5px;*/
			/*    cursor: col-resize;*/
			/*  }*/

			/*  .resizer {*/
			/*    position: absolute;*/
			/*    width: 10px;*/
			/*    height: 10px;*/
			/*    //background-color: red;*/
			/*    z-index: 100;*/
			/*    margin: 0;*/
			/*  }*/
			/*}*/

			/*.line-app {*/
			/*  -webkit-user-select: none; !* Chrome, Safari, Android *!*/
			/*  -moz-user-select: none; !* Firefox *!*/
			/*  -ms-user-select: none; !* IE10+/Edge *!*/
			/*  user-select: none; !* 标准语法 *!*/
			/*  display: flex;*/
			/*  justify-content: center;*/
			/*  align-items: center;*/
			/*  height: 100%;*/
			/*  .line-container {*/
			/*    position: relative;*/
			/*    width: 10px;*/
			/*    height: 20px;*/
			/*    //border: 1px solid #000;*/
			/*    display: flex;*/
			/*    align-items: center;*/
			/*    justify-content: center;*/
			/*  }*/

			/*  .line {*/
			/*    position: absolute;*/
			/*    top: 0;*/
			/*    bottom: 0;*/
			/*    left: 0;*/
			/*    right: 0;*/
			/*    margin: auto;*/
			/*    width: 100%;*/
			/*    height: 2px;*/
			/*    background-color: black;*/
			/*    transform-origin: center;*/
			/*    pointer-events: none;*/
			/*  }*/

			/*  .relative-view {*/
			/*    width: 100%;*/
			/*    height: 100%;*/
			/*    position: relative;*/
			/*  }*/

			/*  .helper-line {*/
			/*    position: absolute;*/
			/*    top: 0;*/
			/*    bottom: 0;*/
			/*    left: 0;*/
			/*    right: 0;*/
			/*    margin: auto;*/
			/*    width: 100%;*/
			/*    height: 2px;*/
			/*    background-color: red;*/
			/*    transform-origin: center;*/
			/*    opacity: 0.5;*/
			/*  }*/

			/*  .absolute-view-1 {*/
			/*    display: none;*/
			/*  }*/

			/*  .absolute-view-2 {*/

			/*    display: none;*/
			/*  }*/
			/*  */
			/*  .text-placeholder {*/
			/*   opacity: 0;*/
			/*  }*/
			/*}*/
			.table-container {
				position: relative;
				margin: 1px;
				width: 100%;
				height: calc(100% - 2px);
			}

			.table-container td {
				border: 1px solid #000;
				margin: 0px -1.3px -1.3px 0px;
			}

			.table-container.verticalLine-flex-start .cell {
				align-items: flex-start !important;
			}

			.table-container.verticalLine-center .cell {
				align-items: center !important;
			}

			.table-container.verticalLine-flex-end .cell {
				align-items: flex-end !important;
			}

			.table-container.flex-start .cell {
				justify-content: left !important;
			}

			.table-container.center .cell {
				justify-content: center !important;
			}

			.table-container.flex-end .cell {
				justify-content: right !important;
			}

			.table-container table {
				border-collapse: collapse;
				width: 100%;
				height: 100%;
			}

			.table-container th,
			.table-container td {
				border: 1px solid black;
				padding: 2px; /* 注意这里原代码中的2:px是语法错误，应改为2px */
			}

			.table-container .cell {
				font-size: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				user-select: none;
				height: 100%;
				width: 100%;
				color: #000;
			}

			.table-container .hidden-element {
				position: absolute;
				top: 0;
				bottom: 0;
				width: 5px;
				cursor: col-resize;
			}

			.table-container .resizer {
				position: absolute;
				width: 10px;
				height: 10px;
				z-index: 100;
				margin: 0;
			}

			.line-app {
				-webkit-user-select: none;
				-moz-user-select: none;
				-ms-user-select: none;
				user-select: none;
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}

			.line-app .line-container {
				position: relative;
				width: 10px;
				height: 20px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.line-app .line {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height: 2px;
				background-color: black;
				transform-origin: center;
				pointer-events: none;
			}

			.line-app .relative-view {
				width: 100%;
				height: 100%;
				position: relative;
			}

			.line-app .helper-line {
				position: absolute;
				top: 0;
				bottom: 0;
				left: 0;
				right: 0;
				margin: auto;
				width: 100%;
				height: 2px;
				background-color: red;
				transform-origin: center;
				opacity: 0.5;
			}

			.line-app .absolute-view-1 {
				display: none;
			}

			.line-app .absolute-view-2 {
				display: none;
			}

			.line-app .text-placeholder {
				opacity: 0;
			}
		</style>
	</head>

	<body style="page-break-after: always; background: #d8dbe3">
		${html}
	</body>
</html>
